<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/html_head :: head(~{::title},~{},~{})">
  <title>我的组</title>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <!-- 主 头部 -->
  <header th:insert="common/top :: top"></header>

  <!-- 左侧菜单，包含logo、搜索、菜单-->
  <aside th:insert="common/left :: left"></aside>

  <!-- Content Wrapper. 页面内容 -->
  <div class="content-wrapper">
    <!-- 页面头部  -->
    <section class="content-header">
      <h1>
        我的组
        <small>管理或加入的组</small>
      </h1>
      <!-- 导航栏 -->
      <ol class="breadcrumb">
          <li><a href="/index"><i class="fa fa-dashboard"></i> 主页</a></li>
        <li class="active">我的组</li>
      </ol>
    </section>
    <!-- Main content -->
    <section class="content container-fluid">

      <!--------------------------
        |      页面内容放在这      |
        -------------------------->
        <div class="row">
            <div class="col-sm-3">
                <!-- /btn-group -->
                <input type="search" class="form-control sql-injection-filter" placeholder="搜索组号" id="navbar-search-input">
            </div>
            <div class="col-sm-3">
                <button class="btn btn-primary btn-md" id="newGroup">创建组</button>
            </div>
        </div>
        <!-- 新建组 模态框（Modal） -->
        <div class="modal fade" id="newGroupModal" tabindex="-1" role="dialog" aria-labelledby="newGroupModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="newGroupModalLabel">
                            新建组
                        </h4>
                    </div>
                    <div class="modal-body" style="text-align:center">
                        <label> 组名： </label>
                        <input id="newGroupName" value="新组" placeholder="起一个名字吧~" class="sql-injection-filter">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消
                        </button>
                        <button type="button" class="btn btn-primary" id="newGroupBtn">
                            新建
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal dialog-->
        </div><!-- /.modal fade -->
        <p>



        </p>
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              <h3 class="box-title">我管理的</h3>
            </div>
            <!-- /.box-header -->
            <h4 th:remove="${myGroupList.size() > 0 ? 'all' : 'none'}">&nbsp;&nbsp;&nbsp;&nbsp;空空如也，去<b><a href="javascript:void(0);">创建</a></b>吧~</h4>
            <div class="box-body" th:remove="${myGroupList.size() > 0 ? 'none' : 'all'}">
              <table class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th>组名</th>
                  <th>人数</th>
                  <th>简介</th>
                  <th>创建时间</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="group, iterator : ${myGroupList}">
                  <td th:text="${group.name}">天下第一组</td>
                  <td th:text="${group.memberNumber}">50</td>
                  <td th:text="${group.intro}">简介</td>
                  <td th:text="${#dates.format(group.createTime,'yyyy-MM-dd HH:mm')}">创建时间</td>
                  <td>
                      <a th:href="'/group/detail/' + ${group.id}">
                          <button type="button" class="btn btn-sm btn-info" >
                              <i class="glyphicon glyphicon-edit"> </i> 详情
                          </button>
                      </a>
                      <a th:href="'/group/detail/' + ${group.id}">
                          <button type="button" class="btn btn-sm btn-primary" >
                              <i class="glyphicon glyphicon-edit"> </i> 管理
                          </button>
                      </a>
                      <a th:href="'/group/detail/' + ${group.id}">
                          <button type="button" class="btn btn-sm btn-success" >
                              <i class="glyphicon glyphicon-edit"> </i> 邀请
                          </button>
                      </a>
                  </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <th>组名</th>
                    <th>人数</th>
                    <th>简介</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
      </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <h3 class="box-title">我加入的</h3>
                    </div>
                    <!-- /.box-header -->
                    <h4 th:remove="${myGroupList.size() > 0 ? 'all' : 'none'}">&nbsp;&nbsp;&nbsp;&nbsp;空空如也，去加入组吧~</h4>
                    <div class="box-body" th:remove="${myGroupList.size() > 0 ? 'none' : 'all'}">
                        <table class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>组名</th>
                                <th>组长</th>
                                <th>加入时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="group, iterator : ${myGroupList}">
                                <td th:text="${group.name}">天下第一组</td>
                                <td th:text="${group.masterId}">张三</td>
                                <td th:text="${#dates.format(group.createTime,'yyyy-MM-dd HH:mm')}">创建时间</td>
                                <th>
                                    <a th:href="'/group/detail/' + ${group.id}">
                                        <button type="button" class="btn btn-sm btn-info" >
                                            <i class="glyphicon glyphicon-edit"> </i> 详情
                                        </button>
                                    </a>
                                    <a th:href="'/group/detail/' + ${group.id}">
                                        <button type="button" class="btn btn-sm btn-danger" >
                                            <i class="glyphicon glyphicon-edit"> </i> 退出
                                        </button>
                                    </a>
                                </th>
                            </tr>

                            </tbody>

                            <tfoot>
                            <tr>
                                <th>组名</th>
                                <th>组长</th>
                                <th>加入时间</th>
                                <th>操作</th>
                            </tr>
                            </tfoot>

                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
        </div>

        <div class="modal fade" id="msgModal" tabindex="-1" role="dialog" aria-labelledby="msgModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="msgModalLabel">操作成功</h4>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">确定
                        </button>
                    </div>
                </div>
            </div>
        </div>

    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->

  <!-- 页脚 -->
  <footer th:insert="common/bottom :: footer"></footer>
  <!-- Control Sidebar 右侧边栏 -->
  <aside th:insert="common/right :: aside"></aside>
  <!-- 右侧边栏的背景，必须紧接着control sidebar放这个  -->
  <div th:insert="common/right :: aside2"></div>
</div>
<!-- ./wrapper -->

<!-- Js 脚本 -->
<div th:insert="common/html_js :: div_js"></div>
<script type="javascript">
    $('#newGroup').onclick(function () {
        console.log("123");
        $('#newGroupModal').modal('show');
    })
    $('#newGroupModal').modal('show');
    $("#newGroupBtn").click(function(){
        $('#newGroupModal').modal('hide');
        var targetUrl = '/group/new.action?newGroupName=' + $("#newGroupName").val();
        $.ajax({
            type:'post',
            url:targetUrl,
            dataType:'json',
            success:function(data){
                if(data.message == "success"){
                    $("#msgModalLabel").text("已停止收集");
                }else{
                    $("#msgModalLabel").text("操作失败" + data.detail);
                }
            },
            error:function(){
                $("#msgModalLabel").text("操作失败");
            }
        })
    });

</script>
</body>
</html>